<template>
  <div>
    <!--列表-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="offerId"
        label="外部商品id"
        width="120">
      </el-table-column>
      </el-table-column>
      <el-table-column
        prop="subject"
        label="1688商品名称"
        width="180">
      </el-table-column>
      <!--<el-table-column
        label="商品图片"
        width="130">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px;"
            :src="scope.row.skuInfos[form.edu].attributes[0].skuImageUrl"
          ></el-image>
        </template>
      </el-table-column>-->
      <el-table-column
        label="商品图片"
        width="130">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px;"
            :src="scope.row.image.images[0]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="sku">
        <template slot-scope="scope">
          <el-select default-first-option placeholder="请选择" v-model="a[scope.$index]"
                     @change="changeSelect(scope.row, scope.$index)">
            <el-option
              v-for="(item, index1) in scope.row.skuInfos"
              :key="index1"
              :label="item.attributes[0].attributeName + ':' + item.attributes[0].attributeValue + (item.attributes.length > 1 ? item.attributes[1].attributeName + ':' + item.attributes[1].attributeValue : '')"
              :value="index1"
            >
              <span
                v-for="(i, ind) in item.attributes"
                :key="ind"
              >{{ i.attributeName }}:{{i.attributeValue}}</span>
              <span>价格：{{item.consignPrice}}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="1688售价">
        <template slot-scope="scope">
          {{consignPrice[scope.$index]}}
        </template>
      </el-table-column>
      <el-table-column
        label="skuId">
        <template slot-scope="scope" v-model="sku.outSkuId">
          {{skuId[scope.$index]}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-upload2" @click="handleUpload(scope.row)">上传
           </el-button>-->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="goAddProduct(scope.row)">添加商品
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="goDeleteProduct(scope.row)">删除抖店商品
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  export default {
    components: {
      ElCol,
      ElRow
    },
    data() {
      return {
        productId: '',
        // 是否显示弹出层
        openEdit: false,
        openAddSpec: false,
        openUp: false,
        titleEdit: '',
        titleSpec: '',
        titleUp: '',
        specIdValue: '',
        payTypeValue: '',
        brandIdValue: '',
        specValue: '',
        firstValue: '',
        secondValue: '',
        thirdValue: '',
        specDetailIdsValue: '',
        deliveryDelayDayValue: '',
        consignPrice: [],
        skuId: [],
        offerId: "",
        attributeName: '',
        attributeValue: '',
        form: {edu: 0, total: 1, imageUrl: []},
        tableData: {},
        addProduct: {},
        sku: {},
        a: [],
        spec: {},
        firstOptions: [{
          id: '',
          name: ''
        }],
        secondOptions: [{
          id: '',
          name: ''
        }],
        thirdOptions: [{
          id: '',
          name: ''
        }],
        specIdOptions: [{
          id: '',
          name: ''
        }],
        brandIdOptions: [{
          id: '',
          brand_chinese_name: ''
        }],
        specDetailIdsOptions: [{
          id: '2',
          name: '2'
        }],
        deliveryDelayDayOptions: [{
          id: '3',
          name: '3'
        },
          {
            id: '5',
            name: '5'
          },
          {
            id: '7',
            name: '7'
          },
          {
            id: '10',
            name: '10'
          },
          {
            id: '15',
            name: '15'
          }],
        payTypeOptions: [{
          value: '0',
          label: '货到付款'
        },
          {
            value: '1',
            label: '在线支付'
          },
          {
            value: '2',
            label: '二者都支持'
          }]
      };
    },
    methods: {
      changeSelect(item, index) {
        this.$set(this.consignPrice, index, item.skuInfos[this.a[index]].consignPrice);
        this.$set(this.skuId, index, item.skuInfos[this.a[index]].skuId);
      },
      handleSizeChange() {
      },
      handleCurrentChange() {
      },
      splitPage(res) {
        this.getProductInfo(res);
      },
      getProductInfo() {
//        this.offerId = this.$route.params.id;
        this.$http.get(`/douyin/goods/lib/getGoodsLib`)
          .then((response) => {
            var result = response.data.dataMap.data;
            this.tableData = result;
            console.log(this.tableData)
            this.tableData.forEach((item, index) => {
              Object.keys(item).forEach((key) => {
                if (key != "id") {
                  this.tableData[index][key] = JSON.parse(
                    this.tableData[index][key]
                  );
                }
              });
            });
          })
      },

      handleUpdate(row) {
        console.log(row);
        this.tableData = row;
        this.openEdit = true;
        this.titleEdit = "修改商品";
      },
      async handleUp(val){
        this.openUp = true;
        this.titleUp = "商品上架";
        await this.$http
          .get(`/douyin/goods/lib/getGoodsLibProductId/${val.id}`)
          .then((response) => {
            var result = response.data.message
            this.sku.productId = result;
          })
      },
      handleAddSpec(){
        this.openAddSpec = true;
        this.titleEdit = "添加商品规格";
      },
      async getSpec() {
        await this.$http
          .get(`/douyin/product/getSpec`)
          .then((response) => {
            var result = response.data.message;
            this.specIdOptions = JSON.parse(result).data
          })
      },
      async getBrandList(){
        await this.$http
          .get(`/douyin/oauth/getBrandList`)
          .then((response) => {
            var result = response.data.message;
            this.brandIdOptions = JSON.parse(result).data
            console.log(this.brandIdOptions)
          })
      },
      async submitSpec(val){
        console.log(val)
        await this.$http
          .post(`/douyin/product/addSpec`, this.spec)
          .then((response) => {
            var result = response.data;
            this.openAddSpec = false;
            this.spec = "";
            if (result.code) {
              this.$message({
                message: '规格添加成功',
                type: 'success'
              });
            }
          })
      },
      async submitSku(){
        await this.$http
          .post(`/douyin/product/addGoodsSku`, this.sku)
          .then((response) => {
            var result = response.data;
            this.openUp = false;
            this.spec = "";
            if (result.code) {
              this.$message({
                message: '上架成功',
                type: 'success'
              });
            }
          })
      },
      async getSpecDetail(val){
        console.log(val)
        await this.$http
          .post(`/douyin/product/getSpecDetail/${val}`)
          .then((response) => {
            var result = response.data.message;
            var specsResult = JSON.parse(result).data.Specs[0].values;
            this.specDetailIdsOptions = specsResult;
          })
      },
      async goDeleteProduct(val){
        await this.$http
          .get(`/douyin/goods/lib/getGoodsInfoById/${val.id}`)
          .then((response) => {
            this.productId = response.data.dataMap.data.productId;
            if (this.productId === null) {
              this.$message.error('删除错误，请添加数据')
            } else {
              this.$http
                .post(`/douyin/product/deleteProduct/${this.productId}`)
                .then((response) => {
                  var result = response.data;
                  var message = JSON.parse(result.message)
                  if (message.err_no === 7) {
                    this.$message.error(message.message)
                  } else if (message.err_no === 4) {
                    this.$message.error(message.message)
                  } else if (message.err_no === 0) {
                    this.$message.success('成功删除抖店草稿箱商品')
                  }
                })
            }
          })
      },

      async submitEdit(){
//        offerId subject name mobile weight marketPrice discountPrice deliveryDelayDay specId payType brandId firstCid secondCid thirdCid productFormat description
        /* console.log('offerId', this.tableData.offerId)
         console.log('subject', this.tableData.subject)
         console.log('name', this.tableData.name)
         console.log('mobile', this.tableData.mobile)
         console.log('weight', this.tableData.weight)
         console.log('discountPrice', this.tableData.discountPrice)
         console.log('specId', this.tableData.specId)
         console.log('payType', this.tableData.payType)
         console.log('brandId', this.tableData.brandId)
         console.log('firstCid', this.tableData.firstCid)
         console.log('secondCid', this.tableData.secondCid)
         console.log('thirdCid', this.tableData.thirdCid)
         console.log('productFormat', this.tableData.productFormat)
         console.log('description', this.tableData.description)*/
        await this.$http
          .post(`/douyin/product/addProduct`, this.tableData)
          .then((response) => {
            var result = response.data.message;
            //this.sku = JSON.parse(result).data;
            this.openEdit = false;
            this.spec = "";
            if (result.code) {
              this.$message({
                message: '商品添加成功',
                type: 'success'
              });
            }
          })
      },
      async getFirstCascader(){
        await this.$http
          .get(`/douyin/product/getGoodsCategory/0`)
          .then((response) => {
            console.log(response)
            var result = response.data.message;
            this.firstOptions = JSON.parse(result).data
            console.log(this.firstOptions)
          })
      },
      async getSecondCascader(val){
        console.log(val)
        await this.$http
          .get(`/douyin/product/getGoodsCategory/${val}`)
          .then((response) => {
            console.log(response)
            var result = response.data.message;
            this.secondOptions = JSON.parse(result).data
            console.log(this.secondOptions)
          })
      },
      async getThirdCascader(val){
        console.log(val)
        await this.$http
          .get(`/douyin/product/getGoodsCategory/${val}`)
          .then((response) => {
            console.log(response)
            var result = response.data.message;
            this.thirdOptions = JSON.parse(result).data
            console.log(this.thirdOptions)
          })
      },

      /* getImageUrl() {
       console.log('description',this.tableData)
       await this.$http
       .post(`/ali/get-img`, {
       resources: this.tableData.description,
       })
       .then((response) => {
       this.tableData.description = response.data.dataMap.data;
       console.log('111',this.tableData.description)
       this.form.imageUrl = response.data.dataMap.data;
       console.log('imageUrl', this.form.imageUrl)
       });
       },*/

      goAddProduct(val){
        this.$router.push({
          path: `/zj/goods/add`,
          query: {id: val.id}
        })
      },
      cancel() {
        this.openEdit = false;
        this.openAddSpec = false;
        this.openUp = false;
        this.sku = '';
      },
    },
    created() {
      this.getProductInfo();
      this.getSpec();
      this.getBrandList();
      this.getFirstCascader();
    },
  };
</script>
